import React, { ReactElement } from 'react';
import { View, ViewStyle } from 'react-native';
import { Surface, Shape, Path } from '@react-native-community/art';

import { phonePx } from '../../../../../util/adapt';
import { CLASS_ROOM_RIGHT_SCALE } from '../../../constant';
import styles from './style';

interface SendMsgProps {
  style?: ViewStyle | ViewStyle[];
  fillColor?: string;
  height?: number;
  children?: any[] | any;
}

const SURFACE_WIDTH = phonePx(153) * CLASS_ROOM_RIGHT_SCALE;

export default ({
  style,
  fillColor = '#D8D8D8',
  height = phonePx(41) * CLASS_ROOM_RIGHT_SCALE,
  children
}: SendMsgProps): ReactElement => {
  const leftTop = new Path()
    .moveTo(SURFACE_WIDTH, height)
    .lineTo(0, height)
    .lineTo(0, phonePx(12) * CLASS_ROOM_RIGHT_SCALE)
    .arc(SURFACE_WIDTH, 0, phonePx(250) * CLASS_ROOM_RIGHT_SCALE)
    .close();
  return (
    <View style={style}>
      <Surface width={SURFACE_WIDTH} height={height} style={styles.container}>
        <Shape d={leftTop} fill={fillColor} />
      </Surface>
      {children}
    </View>
  );
};
